<template>
  <div class="article-comment">
    <div v-if="!isLoggedIn" class="login-prompt">
      <div>
        您尚未登录，请
        <a href="/login" class="login-link">登录</a> 或
        <a href="/register" class="register-link">注册</a>
        后评论
      </div>
    </div>
    <div v-else>
      <CommentForm :articleId="articleId"/>
    </div>
    <div class="comment-list-wrapper">
    <span class="comment-list-title">评论列表</span>
    <div class="comment-list-content">{{ author_count }}人参与 | {{ comment_count }}条评论</div>
  </div>
    <CommentList ref="commentListRef" :articleId="articleId" />
  </div>
</template>
<script setup>
import CommentForm from '@/components/articles/details/comments/CommentForm.vue'
import CommentList from '@/components/articles/details/comments/CommentList.vue'
import {useUserStore} from '@stores/userStore.js'

const commentListRef = ref(null)
const store = useUserStore()
const comment_count = ref(0)
const author_count = ref(0)
const props = defineProps({
  articleId: {
    type: Number,
    required: true
  }
})

const isLoggedIn = computed(() => store.isLoggedIn)

//通过接口获取当前评论人数以及评论数量 /api/cms/articles/1/get_comment_info/
const getCommentInfo = async () => {
  try {
    const response = await axios.get('/api/cms/articles/' + props.articleId + '/get_comment_info/')
    author_count.value = response.data.author_count
    comment_count.value = response.data.comment_count
  } catch (error) {
    console.error('获取评论信息失败:', error)
  }
}

provide('refreshComments', () => {
  commentListRef.value?.fetchComments();
  getCommentInfo(); // 同时更新统计信息
});
onMounted(getCommentInfo)


</script>
<style scoped>
.article-comment {
  margin-top: 20px;
  background-color: var(--card-bg-color, #fff);
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 未登录提示样式 */
.login-prompt {
  background: var(--card-bg-color, #f8f8f8);
  border: 1px solid var(--article-button-bg-color, #e0e0e0);
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 20px;
}

.login-prompt div {
  margin-bottom: 10px;
  font-size: 16px;
  color: var( --article-detail-text-color, #333);
}

.login-link,
.register-link {
  color: var(--article-button-bg-color, #e74c3c);
  font-weight: bold;
  text-decoration: none;
  margin: 0 5px;
}

.login-link:hover,
.register-link:hover {
  text-decoration: underline;
}
/* 评论列表样式 */
.comment-list-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--article-comment-border-color, #f0f0f0);
  margin-bottom: 10px;
}
.comment-list-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--article-detail-text-color, rgba(26, 25, 25, 0.51));
}
.comment-list-content {
  font-size: 14px;
  color: var(--article-detail-text-color,#999999);
}

</style>